import { register } from '@antv/x6-vue-shape'
import End from './end.vue'
import Ended from './ended.vue'
import Table from './table.vue'
import Join from './join.vue'
register({
  shape: 'custom-vue-end',
  width: 400,
  height: 200,
  component: End,
  ports: {
    groups: {
      top: {
        position: 'top',
        attrs: {
          circle: {
            magnet: true,
            stroke: '#8f8f8f',
            r: 5
          }
        }
      },
      bottom: {
        position: 'bottom',
        attrs: {
          circle: {
            magnet: true,
            stroke: '#8f8f8f',
            r: 5
          }
        }
      },
      left: {
        position: 'left',
        attrs: {
          circle: {
            magnet: true,
            stroke: '#8f8f8f',
            r: 5
          }
        }
      },
      right: {
        position: 'right',
        attrs: {
          circle: {
            magnet: true,
            stroke: '#8f8f8f',
            r: 5
          }
        }
      }
    }
  }
})
register({
  shape: 'custom-vue-ended',
  width: 100,
  height: 50,
  component: Ended,
  ports: {
    groups: {
      top: {
        position: 'top',
        attrs: {
          circle: {
            magnet: true,
            stroke: '#8f8f8f',
            r: 5
          }
        }
      },
      bottom: {
        position: 'bottom',
        attrs: {
          circle: {
            magnet: true,
            stroke: '#8f8f8f',
            r: 5
          }
        }
      },
      left: {
        position: 'left',
        attrs: {
          circle: {
            magnet: true,
            stroke: '#8f8f8f',
            r: 5
          }
        }
      },
      right: {
        position: 'right',
        attrs: {
          circle: {
            magnet: true,
            stroke: '#8f8f8f',
            r: 5
          }
        }
      }
    }
  }
})
register({
  shape: 'custom-vue-table',
  width: 400,
  height: 200,
  component: Table,
  ports: {
    groups: {
      top: {
        position: 'top',
        attrs: {
          circle: {
            magnet: true,
            stroke: '#8f8f8f',
            r: 5
          }
        }
      },
      bottom: {
        position: 'bottom',
        attrs: {
          circle: {
            magnet: true,
            stroke: '#8f8f8f',
            r: 5
          }
        }
      },
      left: {
        position: 'left',
        attrs: {
          circle: {
            magnet: true,
            stroke: '#8f8f8f',
            r: 5
          }
        }
      },
      right: {
        position: 'right',
        attrs: {
          circle: {
            magnet: true,
            stroke: '#8f8f8f',
            r: 5
          }
        }
      }
    }
  }
})
register({
  shape: 'custom-vue-join',
  width: 400,
  height: 200,
  component: Join,
  ports: {
    groups: {
      top: {
        position: 'top',
        attrs: {
          circle: {
            magnet: true,
            stroke: '#8f8f8f',
            r: 5
          }
        }
      },
      bottom: {
        position: 'bottom',
        attrs: {
          circle: {
            magnet: true,
            stroke: '#8f8f8f',
            r: 5
          }
        }
      },
      left: {
        position: 'left',
        attrs: {
          circle: {
            magnet: true,
            stroke: '#8f8f8f',
            r: 5
          }
        }
      },
      right: {
        position: 'right',
        attrs: {
          circle: {
            magnet: true,
            stroke: '#8f8f8f',
            r: 5
          }
        }
      }
    }
  }
})

export const joinNode = {
  shape: 'custom-vue-join',
  ports: {
    items: [
      {
        id: 'caseNodeTop',
        group: 'top'
      },
      {
        id: 'caseNodeBottom',
        group: 'bottom'
      },
      // {
      //   id: 'caseNodeLeft',
      //   group: 'left'
      // },
      // {
      //   id: 'caseNodeRight',
      //   group: 'right'
      // }
    ]
  }
}
export const tableNode = {
  shape: 'custom-vue-table',
  ports: {
    items: [
      // {
      //   id: 'caseNodeTop',
      //   group: 'top'
      // },
      {
        id: 'caseNodeBottom',
        group: 'bottom'
      },
      // {
      //   id: 'caseNodeLeft',
      //   group: 'left'
      // },
      // {
      //   id: 'caseNodeRight',
      //   group: 'right'
      // }
    ]
  }
}
export const endNode = {
  shape: 'custom-vue-end',
  ports: {
    items: [
      {
        id: 'caseNodeTop',
        group: 'top'
      },
      {
        id: 'caseNodeBottom',
        group: 'bottom'
      },
      // {
      //   id: 'caseNodeLeft',
      //   group: 'left'
      // },
      // {
      //   id: 'caseNodeRight',
      //   group: 'right'
      // }
    ]
  }
}
export const endedNode = {
  shape: 'custom-vue-ended',
  ports: {
    items: [
      {
        id: 'caseNodeTop',
        group: 'top'
      },
      // {
      //   id: 'caseNodeLeft',
      //   group: 'left'
      // },
      // {
      //   id: 'caseNodeRight',
      //   group: 'right'
      // }
    ]
  }
}
